<template>
  <div>
   <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
   </el-breadcrumb>

   <el-card>
       <el-button type='primary' @click='addCate'>添加分类</el-button>
       <tree-table style="margin-top:15px;" :show-index='true' index-text='#' :selection-type='false' :expand-type='false' :show-row-hover='false' border strip :data='cateList' :columns='columns'>
           <template slot="isOk" slot-scope="scope">
               <i v-if="scope.row.cat_deleted==false" style="color:green" class="el-icon-success"></i>
               <i v-else class="el-icon-error" style="color:red"></i>
           </template>
           <template slot="order" slot-scope="scope">
              <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
              <el-tag v-else-if="scope.row.cat_level==1" type="success">二级</el-tag>
              <el-tag v-else type="warning">三级</el-tag>
           </template>
           <template slot="opt" slot-scope="scope">
               <el-button size='mini' type="primary" icon="el-icon-edit">编辑</el-button>
               <el-button size='mini' type="danger" icon="el-icon-delete">删除</el-button>
           </template>
       </tree-table>

       <!-- 分页 -->
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
   </el-card>
   <!-- 添加分类对话框 -->
   <el-dialog
   @close='addCateDialogClosed'
    title="添加分类"
    :visible.sync="addCateDialogVisible"
    width="50%">
    <el-form  :model="addCateForm" :rules="addCateRules" ref="addCateRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:">
            <!-- v-model是选择之后的数组保存在v-model中,options是数据源 -->
            <el-cascader
                v-model="selectOptionArr"
                :options="parentCate"
                clearable
                :props="cascaderProps"
                @change="cascaderhandleChange">
            </el-cascader>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCateSub">确 定</el-button>
    </span>
  </el-dialog>

   <!-- 编辑对话框 -->

   <!-- 删除对话框 -->
  </div>
</template>

<script>
export default {

  data () {
    return {
        queryData:{
            type:3,
            pagenum:1,
            pagesize:10
        },
        cateList:[],
        total:0,
        columns:[{
            label:'分类名称',
            prop:'cat_name'
        },{
            label:'是否有效',
            type:'template',
            template:'isOk'
        },{
            label:'排序',
            type:'template',
            template:'order'
        },{
            label:'操作',
            type:'template',
            template:'opt'
        }],
        // 控制添加分类对话框显示与隐藏
        addCateDialogVisible:false,
        // 添加分类的参数
        addCateForm:{
            cat_pid:0,
            cat_name:'',
            cat_level:0
        },
        // 添加分类校验规则
        addCateRules:{cat_name:[{ required: true, message: '请输入用户名称', trigger: 'blur' }]},

        // 父级分类
        parentCate:[],
        // 保存选中后的选项
        selectOptionArr:[],
        cascaderProps:{
            expandTrigger: 'hover',
            label:'cat_name',
            value:'cat_id',
            checkStrictly:true
        }
    }
  },

  methods: {
      async getCateList(){
          const res=await this.axios.get('categories',{
              params:this.queryData
          });
          
          if(res.meta.status==200){
              this.cateList=res.data.result;
              this.total=res.data.total;
          }
      },
    //   处理每页条数
      handleSizeChange(v){          
          this.queryData.pagesize=v;
          this.getCateList();
      },
    //   处理当前页码
      handleCurrentChange(v){
          this.queryData.pagenum=v;
          this.getCateList();
      },
    //   添加分类
    async addCate(){
        this.addCateDialogVisible=true;
        const res=await this.axios.get('categories',{
              params:{
                  type:2
              }
        });

        if(res.meta.status==200){
            this.parentCate=res.data;
        }
        // console.log(this.parentCate);
    },

    // 级联分类选中项之后出发的事件
    cascaderhandleChange(){
        console.log(this.selectOptionArr);
        if(this.selectOptionArr.length > 0){
            // 父id是selectOptionArr数组中最后一个值
            this.addCateForm.cat_pid=this.selectOptionArr[this.selectOptionArr.length-1];
            // 数组的长度是等级
            this.addCateForm.cat_level=this.selectOptionArr.length;
        }else{
            // 清空
            this.addCateForm.cat_pid=0;
            this.addCateForm.cat_level=0;
        }

    },

    // 点击添加提交分类
    addCateSub(){
        console.log(this.addCateForm);
        // 判断是否校验成功
        this.$refs.addCateRef.validate(async flag=>{
            if(!flag) return
            const res=await this.axios.post('categories',this.addCateForm);
            if(res.meta.status==201){
                this.$mg.success(res.meta.msg);
                this.addCateDialogVisible=false;
                this.getCateList();
            }
        })
    },
    // 点击关闭对话框清空数据
    addCateDialogClosed(){
        this.$refs.addCateRef.resetFields();
        this.selectOptionArr=[];
        this.addCateForm.cat_pid=0;
        this.addCateForm.cat_level=0;
    }

  },

  created () {
      this.getCateList();
  }
}
</script>

<style lang='less' scoped>
    .el-cascader{
        width:100%;
    }
</style>
